<template>
    <!-- ec-canvas/wallet/orderstatistics/hiarorderdetails/index.wxml -->
    <view>
        <view class="flexbox-sb pickerbox">
            <view></view>
            <picker class="mt-20" mode="date" fields="month" :value="currentDate" :start="minDate" :end="maxDate" @change="onInputTime">
                <image class="icon-40" :src="imgUrl + 'calendar.png'"></image>
            </picker>
        </view>
        <view class="hairbox">
            <view class="flexbox-sb">
                <view>
                    <view class="centers">
                        <text class="name">{{ stylistNickName }}</text>
                        <text class="job">{{ position }}</text>
                    </view>
                    <view class="hairtype">{{ nexus == 0 ? '网约美发师' : '店内美发师' }}</view>
                    <view class="time">入驻时间：{{ stylistNexusTime }}</view>
                </view>
                <view>
                    <image class="headimg" :src="stylistPhotoPath"></image>
                </view>
            </view>
            <view class="flexbox-sb mt-30">
                <view class="order_one">
                    <view class="order_num">完成单数</view>
                    <view class="order_money">{{ stylistOrderCount }}</view>
                    <view class="order_h"></view>
                </view>
                <view class="order_one">
                    <view class="order_num">收入</view>
                    <view class="order_money">￥{{ storeAmount }}</view>
                </view>
            </view>
        </view>
        <view class="mt-20 order_detailsbox">
            <view class="flexbox-sb order_details" v-for="(item, index) in storeStylistOrderList" :key="index">
                <view class="centers">
                    <view class="mr-30">
                        <image class="headimg" :src="item.userPhotoPath"></image>
                    </view>
                    <view>
                        <view class="details_name">用户名：{{ item.nickName }}</view>
                        <view class="details_server">项目名称：{{ item.serviceName }}</view>
                        <view class="details_time">完成时间：{{ item.successTime }}</view>
                    </view>
                </view>

                <view class="details_money">¥ {{ item.amount }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// ec-canvas/wallet/orderstatistics/hiarorderdetails/index.js
const app = getApp(); // 引入app

import _request from '../../../../utils/request.js';
import { getTime } from '../../../../utils/util.js'; // 引入utils;

const moment = require('../../../../utils/moment.min');

export default {
    data() {
        return {
            pageNo: 1,
            orderData: null,

            // 收的订单数据
            orderList: [],

            // 列表
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            currentDate: moment().format('YYYY-MM-DD'),

            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),
            gettime: '',
            stylistNickName: '',
            position: '',
            nexus: '',
            stylistNexusTime: '',
            stylistPhotoPath: '',
            stylistOrderCount: 0,
            storeAmount: 0,
            storeStylistOrderList: [],
            page: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.data) {
            this.setData(
                {
                    orderData: JSON.parse(options.data),
                    stylistNickName: JSON.parse(options.data).stylistNickName,
                    nexus: JSON.parse(options.data).nexus,
                    stylistPhotoPath: JSON.parse(options.data).stylistPhotoPath,
                    stylistOrderCount: JSON.parse(options.data).stylistOrderCount,
                    storeAmount: JSON.parse(options.data).storeAmount
                },
                () => {
                    this.getstoreOrderDetail();
                }
            );
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        // this.setData({
        //   page: 1
        // }, () => {
        //   this.getstoreOrderDetail(true)
        // })
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // this.setData({
        //   page: this.data.pageNo + 1
        // }, () => {
        //   this.getstoreOrderDetail(false)
        // })
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取时间
        onInputTime(event) {
            let dt = event.detail.value;
            this.setData(
                {
                    currentDate: dt,
                    gettime: moment(dt).format('YYYYMM'),
                    page: 1
                },
                () => {
                    this.screenData();
                }
            );
        },

        // 筛选
        screenData(show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/storeOrderDetail/findOrderIncomeSumByStoreAndStylist', {
                    // pageNo: 1,
                    // pageSize: 10,
                    date: this.gettime,
                    stylistId: this.orderData.stylistId,
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.data && res.data.code == 200) {
                        let data = res.data.data;
                        this.setData({
                            orderList: data,
                            position: data.position,
                            stylistNexusTime: data.nexustime,
                            stylistNickName: data.stylistName,
                            stylistOrderCount: data.orderCount,
                            storeAmount: data.amount,
                            storeStylistOrderList: data.storeStylistOrderList
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 获取列表
        getstoreOrderDetail(show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/storeOrderDetail/findOrderDetailByStoreAndStylist', {
                    storeId: uni.getStorageSync('storeId'),
                    stylistId: this.orderData.stylistId,
                    date: this.orderData.gettime,
                    pageNo: this.pageNo,
                    pageSize: 10,
                    nexus: this.orderData.nexus
                })
                .then((res) => {
                    if (res.data.code == 200 && res.data.data) {
                        this.setData({
                            storeStylistOrderList: res.data.data.storeStylistOrderList.map((item) => {
                                if (item.serviceName.indexOf('#') > -1) {
                                    item.serviceName = item.serviceName.split('#')[0];
                                }

                                return item;
                            }),
                            position: res.data.data.position,
                            stylistNexusTime: res.data.data.stylistNexusTime
                        });

                        if (show) {
                            uni.hideNavigationBarLoading(); //完成停止加载

                            uni.stopPullDownRefresh(); //停止下拉刷新
                        }
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        }
    }
};
</script>
<style>
/* ec-canvas/wallet/orderstatistics/hiarorderdetails/index.wxss */
/*  */

.icon-20 {
    width: 40rpx;
    height: 40rpx;
}

.hairbox {
    width: 710rpx;
    height: 352rpx;
    background: #ffffff;
    box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4);
    border-radius: 8px;
    padding: 40rpx 40rpx 28rpx 40rpx;
    box-sizing: border-box;
    margin: 0 20rpx;
}

.name {
    max-width: 370rpx;
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
    margin-right: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job {
    height: 32rpx;
    background: #ff8722;
    border-radius: 0px 8px 8px 8px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 32rpx;
    padding: 0 10rpx;
}

.hairtype,
.time {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    margin: 10rpx 0;
}

.headimg {
    height: 128rpx;
    width: 128rpx;
    border-radius: 50%;
}

.order_one {
    height: 90rpx;
    text-align: center;
}

.mt-30 {
    margin: 30rpx 60rpx 0 60rpx;
    position: relative;
}

.order_h {
    position: absolute;
    height: 40rpx;
    border: 2rpx solid #e9e9e9;
    right: 50%;
    top: 30%;
}

.order_num {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.order_money {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 40rpx;
}

.order_detailsbox {
    margin: 20rpx;
    background: #ffffff;
    padding: 0rpx 22rpx 0 20rpx;
    box-sizing: border-box;
    width: 710rpx;
}

.order_details {
    height: 200rpx;
    background: #ffffff;
    padding: 26rpx 0 30rpx 0;
    border-bottom: 2rpx solid #ededed;
    box-sizing: border-box;
    position: relative;
}

.details_name {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 400rpx;
}

.details_server,
.details_time {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-top: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.details_money {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff3e22;
    line-height: 44rpx;
    position: absolute;
    top: 26rpx;
    right: 22rpx;
}

.pickerbox {
    height: 80rpx;
    padding: 0 40rpx;
}
</style>
